<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Basic HTML text: Task 1</title>
    <link rel="stylesheet" href="../styles.css" />
    <style>
      * {
        box-sizing: border-box;
      }
    </style>

    <style class="editable">
      h1, h2 {
        color: purple;
      }

      p {
        color: gray;
      }
    </style>
  </head>

  <body>
    <section class="preview">

      Basic HTML Animals

      This is the first paragraph in our page. It introduces our animals.

      The Llama

      Our Llama is a big fan of list items. When she spies a patch of them on a web page, she will eat them like sweets, licking her lips as she goes.

      The Anaconda

      The crafty anaconda likes to slither around the page, travelling rapidly by way of anchors to sneak up on his prey.

    </section>

    <textarea class="playable playable-css" style="height: 130px;">
h1, h2 {
  color: purple;
}

p {
  color: gray;
}
    </textarea>

    <textarea class="playable playable-html" style="height: 220px;">
Basic HTML Animals

This is the first paragraph in our page. It introduces our animals.

The Llama

Our Llama is a big fan of list items. When she spies a patch of them on a web page, she will eat them like sweets, licking her lips as she goes.

The Anaconda

The crafty anaconda likes to slither around the page, travelling rapidly by way of anchors to sneak up on his prey.
    </textarea>

    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script src="../playable.js"></script>
</html>
